<template>
  <div class="navigation">
    <div class="item-content" ref="navItemContent">
      <div v-for="(item,index) in state.navData" :key="item.name" class="navItem">
        <div v-text="item.title"
             :class="{'activeMenu':state.activeMenu === item.name}"
             @click="jumpPage(item.name)"
             @mouseenter="handleDivMouseEnter($event)"
             @mouseleave="handleDivMouseleave()"
        ></div>
        <em class="tbdfont tbd-shanchuanniu" @click="closePage(item,index)"></em>
      </div>
    </div>
    <div class="operate-tab">
      <el-tooltip
          effect="light"
          content="向左移"
          placement="bottom-end"
      >
        <em class="tbdfont tbd-quanbuxiangzuo" @click="moveLeft"></em>
      </el-tooltip>
      <el-tooltip
          effect="light"
          content="向右移"
          placement="bottom-end"
      >
        <em class="tbdfont tbd-quanbuxiangyou" @click="moveRight"></em>
      </el-tooltip>
    </div>
  </div>

  <el-tooltip v-model:visible="state.visible"
              effect="light" :content="state.tooltipContent"
              placement="bottom-start"
              virtual-triggering :virtual-ref="triggerRef">
    <div>lalalalala</div>
  </el-tooltip>
</template>

<script setup>
import {reactive, computed, ref, getCurrentInstance} from "vue";
import {useRoute, useRouter} from 'vue-router'
import {useStore} from "vuex";
import store from '@/store';

const route = useRoute();
const router = useRouter();
const {getters} = useStore();
const {proxy} = getCurrentInstance();

const navItemContent = ref(null);

const state = reactive({
  navData: computed(() => getters['boardMenu/getNavRouters']),
  operationStatus:computed(() => getters['plan/getOperationStatus']),
  activeMenu: computed(() => route.name),

  tooltipContent:'',//悬浮框内容
  visible:false,//悬浮框显示隐藏
  position:{
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },//悬浮框位置
})
/**
 * 提示框
 * @type {Ref<UnwrapRef<{getBoundingClientRect(): UnwrapRef<{top: number, left: number, bottom: number, right: number}>}>>}
 */
const triggerRef = ref({
  getBoundingClientRect() {
    return state.position;
  },
});

/**
 * 关闭选项
 * @param item
 * @param index
 */
const closePage = (item, index) => {
  
  //若是只剩一个，则不让删除
  if (state.navData.length <= 1){
    return;
  }
  let curName = state.activeMenu;//未删除之前的菜单
  let url = index !== 0 ? state.navData[index - 1].name : state.navData[index + 1].name;//未删除之前的菜单的前一个
  if (curName === item.name) {
    jumpPage(url);
  }
  if(state.operationStatus && item.name=='simulationOperation'){
    return
  }
  state.navData.splice(index, 1);//删除数据
  sessionStorage.boardMenu = JSON.stringify(state.navData);
  store.dispatch('boardMenu/setRouters',state.navData);

  
}

/**
 * 跳转页面
 * @param url
 */
const jumpPage = (url)=>{
  if (url === 'intersectionDetails'){
    let intersectionDetails = sessionStorage.intersectionDetails ? JSON.parse(sessionStorage.intersectionDetails) :{}
    if (!sessionStorage.intersectionDetails){
      proxy.$tipMessage('无法跳转，请从交叉口或全息路口模块进入详情页面','error');
      return;
    }
    router.push({path: '/intersectionDetails', query: intersectionDetails})
     return ;
  }
  router.push('/' + url);
}

/**
 * 向左
 */
const moveLeft = ()=>{
  let navWidth = navItemContent.value.clientWidth;
  let navArray = document.getElementsByClassName('navItem');
  let itemWidth = navArray.length > 0 ? navArray[0].clientWidth : 0;
  let count = state.navData.length;
  if (count * itemWidth > navWidth){
    //移动
    navItemContent.value.scrollTo({
      left: - Math.floor(navWidth/itemWidth) * itemWidth,
      behavior: 'smooth'
    })
  }
}

/**
 * 向右
 */
const moveRight = ()=>{
  let navWidth = navItemContent.value.clientWidth;
  let navArray = document.getElementsByClassName('navItem');
  let itemWidth = navArray.length > 0 ? navArray[0].clientWidth : 0;
  let count = state.navData.length;
  if (count * itemWidth > navWidth){
    //移动
    navItemContent.value.scrollTo({
      left: Math.floor(navWidth/itemWidth) * itemWidth,
      behavior: 'smooth'
    })
  }
}

/**
 * 鼠标移入
 */
const handleDivMouseEnter = (event)=>{
  if (event.target.scrollWidth > event.target.offsetWidth) {
    let data = event.target.getBoundingClientRect();
    state.position = DOMRect.fromRect({
      width: 0,
      height: 0,
      x: data.x,
      y: data.y + data.height,
    });
    state.tooltipContent = event.target.innerText;
    state.visible = true;
  }
}

/**
 * 鼠标移出
 */
const handleDivMouseleave = ()=>{
  state.visible = false;
}
</script>

<style scoped lang="scss">
.navigation {
  width: 100%;
  height: pxTvh(30);
  //box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
  background: #0F121B;
  // background: linear-gradient(270deg, #102644 0%, #1E3D68 100%);
  border: 1px solid rgba(126,169,255,0.2);
  display: flex;
  box-sizing: border-box;
  z-index: 10;
  & > .item-content{
    width: calc(100% - #{pxTvw(56+16)});
    height: 100%;
    display: flex;
    z-index: 11;
    overflow-x: hidden;
    & > .navItem {
      @include elasticFN(space-between, center);
      width: pxTvw(137);
      padding: 0 pxTvw(15) 0 pxTvw(16);
      box-sizing: border-box;
      position: relative;
      & > div {
        color: #7B7B7B;
        @include computed_font(12);
        font-family: Source Han Sans CN-Regular, Source Han Sans CN, sans-serif;
        font-weight: 400;
        min-width: pxTvw(84);
        @include cursorFN();
        width: pxTvw(137-31-14);
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        &:hover{
          color: #FFFFFF;
        }
      }
      &> .activeMenu{
        color: #FFFFFF;
      }
      em {
        @include computed_font(12);
        @include cursorFN();
        color: #7B7B7B;
        &:hover{
          color: #FFFFFF;
        }
      }
      &::after{
        content:'';
        position: absolute;
        right: 0;
        top: pxTvh(9);
        background: #677A92;
        height: pxTvh(12);
        width: pxTvw(1);
      }
    }
  }
  & > .operate-tab{
    width: pxTvw(56+16);
    float: right;
    height: 100%;
    padding: 0 pxTvw(8) 0 pxTvw(16);
    box-sizing: border-box;
    //background: #F7F8FA;
    z-index: 12;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.06), 1px 0 0 rgba(0, 0, 0, 0.1);
    em{
      @include cursorFN();
      @include computed_font(16);
      color: #979797;
      line-height: pxTvh(30);
      margin-right: pxTvw(8);
    }
  }
}
</style>
